 <template>
      <div id="aCoursesList" class="bg-fa of">
        <!-- 讲师列表 开始 -->
        <section class="container">
          <header class="comm-title all-teacher-title">
            <h2 class="fl tac">
              <span class="c-333">全部讲师</span>
            </h2>
            <section class="c-tab-title">
              <a id="subjectAll" title="全部" href="#">全部</a>
              <!-- <c:forEach var="subject" items="${subjectList }">
                                <a id="${subject.subjectId}" title="${subject.subjectName }" href="javascript:void(0)" onclick="submitForm(${subject.subjectId})">${subject.subjectName }</a>
              </c:forEach>-->
            </section>
          </header>
          <section class="c-sort-box unBr">
            <div>
              <!-- /无数据提示 开始-->
              <section class="no-data-wrap" v-if="teacherlist.total==0">
                <em class="icon30 no-data-ico">&nbsp;</em>
                <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
              </section>
              <!-- /无数据提示 结束-->
              <article class="i-teacher-list" v-else>
                <ul class="of">
                  <li v-for="(item,index) in teacherlist.items" :key="index">

                    <section class="i-teach-wrap">

                      <div class="i-teach-pic">

                        <a :href="'/teacher/'+item.id" :title="item.name" target="_blank">

                          <img :src="item.avatar" style="width: 135px; height: 135px;" :alt="item.name">

                        </a>

                      </div>

                    <div class="mt10 hLh30 txtOf tac">

                        <a href="/teacher/1" title="姚晨" target="_blank" class="fsize18 c-666">{{item.name}}</a>

                      </div>

                      <div class="hLh30 txtOf tac">

                        <span class="fsize14 c-999">{{item.intro}}</span>

                      </div>

                      <div class="mt15 i-q-txt">

                        <p class="c-999 f-fA">{{item.career}}</p>

                      </div>

                    </section>

                  </li>

                </ul>

              </article>
            </div>
            <!-- 公共分页 开始 -->
            <div>
                <div class="paging">
                  <!-- undisable这个class是否存在，取决于数据属性hasPrevious -->
                  <a
                    :class="{undisable: !teacherlist.hasPrevious}"
                    href="#"
                    title="首页"
                    @click.prevent="getAll(1)">首</a>
                  <a
                    :class="{undisable: !teacherlist.hasPrevious}"
                    href="#"
                    title="前一页"
                    @click.prevent="getAll(teacherlist.current-1)">&lt;</a>
                  <a
                    v-for="page in teacherlist.pages"
                    :key="page"
                    :class="{current: teacherlist.current == page, undisable: teacherlist.current == page}"
                    :title="'第'+page+'页'"
                    href="#"
                    @click.prevent="getAll(page)">{{ page }}</a>
                  <a
                    :class="{undisable: !teacherlist.hasNext}"
                    href="#"
                    title="后一页"
                    @click.prevent="getAll(teacherlist.current+1)">&gt;</a>
                  <a
                    :class="{undisable: !teacherlist.hasNext}"
                    href="#"
                    title="末页"
                    @click.prevent="getAll(teacherlist.pages)">末</a>
              </div>
            </div>
            <!-- 公共分页 结束 -->
          </section>
        </section>
        <!-- /讲师列表 结束 -->
      </div>
</template>


<script>
  import {pageTeacher} from '~/http'
  export default {
    data(){
      return{
        page:0,
        limle:8,
        teacherlist:[],
      }
    },
    created() {
      this.getAll()
    },
    methods:{
      getAll(page = 1){
        this.page = page;
        pageTeacher(page,this.limle).then(res=>{
          this.teacherlist = res.data;
        })

      }
    }
  }
</script>

<style scoped>

</style>
